<template>
  <van-nav-bar title="我的收入" />
  <div class="relative">
    <div class="sticky top-0">
      <van-tabs v-model:active="active" @change="onChangeTab">
        <van-tab title="今日"></van-tab>
        <van-tab title="本周"></van-tab>
        <van-tab title="本月"></van-tab>
        <van-tab title="时间段">
          <date-range @on-date="onDate" />
        </van-tab>
      </van-tabs>
    </div>
    <div class="text-center pt-2">
      <span class="text-lg">￥{{ $formatMoney(total) }}</span>
      <span class="ml-4">{{ sold }}单</span>
    </div>
    <this-list ref="list" @refresh-sum="resetSum" />
  </div>
</template>

<script>
import dateRange from './date-range.vue'
import thisList from './list.vue'
export default {
  components: { dateRange, thisList },
  setup() {},
  data() {
    return {
      active: 1,
      total: 0,
      sold: 0,
    }
  },
  methods: {
    onChangeTab() {
      if (this.active == 3) {
        return
      }
      let search = ['today=1', 'this-week=1', 'this-month=1'][this.active]
      this.$refs.list.reload(search)
    },
    onDate({ start, end }) {
      let search = `start=${start}&end=${end}`
      this.$refs.list.reload(search)
    },
    resetSum({ sum, count }) {
      this.total = sum
      this.sold = count
    },
  },
}
</script>

<style></style>
